<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.80, maximum-scale=1.0, user-scalable=yes" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>File Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="file-manager">
        <div class="toolbar">
            <input type="file" id="file-upload" style="display: none;" multiple>
            <button id="upload"><img src="icons/upload.png" class="icon"> <span>Upload</span></button>
            <button id="download"><img src="icons/download.png" class="icon"> <span>Download</span></button>
            <button id="move-to"><img src="icons/move.png" class="icon"> <span>Move To</span></button>
            <button id="copy-to"><img src="icons/copy.png" class="icon"> <span>Copy To</span></button>
            <button id="rename"><img src="icons/rename.png" class="icon"> <span>Rename</span></button>
            <button id="new-folder"><img src="icons/new_folder.png" class="icon"> <span>New Folder</span></button>
            <button id="btnNewFile"><img src="icons/new_file.png" class="icon"> <span>New File</span></button>
            <button id="delete"><img src="icons/delete.png" class="icon"> <span>Delete</span></button>
            <button id="benRestart"><img src="icons/shutdown.png" class="icon"> <span>Restart</span></button>
        </div>
        <div id="breadcrumb-container">
            <div class="breadcrumb" id="breadcrumb"></div>
            <div id="status-container">
                <div id="progressbar-container">
                    <div id="progressbar"></div>
                </div>
                <div id="memory-status"></div>
            </div>
        </div>
        <div class="file-list" id="file-list" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
            <table id="file-table">
                <thead>
                    <tr>
                        <th><label><input type="checkbox" id="chkAll">Check All</label></th>
                        <th>Name</th>
                        <th>File Size</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Dynamic file listing -->
                </tbody>
            </table>
        </div>
        <div id="error-message" style="color: red;"></div>
    </div>
    <div id="popup-overlay" class="popup-overlay" style="display: none;">
        <div id="popup-window" class="popup-window">
            <div id="popup-content"></div>
            <button id="popup-close" class="popup-button">Close</button>
        </div>
    </div>
    <dialog id="dialogCreateFile">
        <div>
            <div class="title">
                <h4>新增文件</h4>
                <button name="btnCloseDialog">X</button>
            </div>
            <div class="content">
                <input id="txtNewFileName" placeholder="请输入文件名称"/>
            </div>
            <div class="buttons">
                <button id="btnCreateFile">确定</button>
                <button name="btnCloseDialog">关闭</button>
            </div>
        </div>
    </dialog>
    <dialog id="dialogEditFile">
        <div>
            <div class="title">
                <h4 id="spanTile">文件编辑</h4>
                <button name="btnCloseDialog">X</button>
            </div>
            <div class="content">
                <textarea id="txtFileContent" style="width: 100%;"></textarea>
            </div>
            <div class="buttons">
                <button id="btnSaveFile">保存</button>
                <button name="btnCloseDialog">关闭</button>
            </div>
        </div>
    </dialog>
    <script src="scripts.js"></script>
    <link href="https://cdn.staticfile.net/codemirror/6.65.7/codemirror.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/6.65.7/theme/idea.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/6.65.7/addon/hint/show-hint.css">
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/codemirror.min.js"></script>
    <!-- 引入mode  此处为js mode-->
    <script src="https://cdn.staticfile.org/codemirror/6.65.7/mode/xml/xml.min.js"></script>
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/css/css.min.js"></script>
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/python/python.min.js"></script>
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/htmlmixed/htmlmixed.min.js"></script>
    <!-- <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/htmlembedded/htmlembedded.min.js"></script> -->
    <script src="https://cdn.staticfile.net/codemirror/6.65.7/mode/vue/vue.min.js"></script>
</body>
</html>
